<template>
  <div class="cardbg">
    <div class="card">
      <!-- 顶部导航 -->
      <el-row style="height: 30px;" align="middle">
        <div style="width: 6px; height:20px;background-color:#2984f8;border-radius: 5px;margin-right: 10px;">
        </div>
        <span style="font-size: 18px;">居民详情</span>
      </el-row>
      <!-- 选项卡 -->
      <el-tabs v-model="activeName">
        <el-tab-pane name="health-archive">
          <template #label>
            <span style="font-size: 20px;">健康档案</span>
          </template>
          <!-- 居民信息 -->
          <div class="section">
            <h2>居民信息</h2>
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="info-item">
                  <span>居民编号</span>
                  <span v-if="!isEditing">{{ residentInfo.id }}</span>
                  <el-input v-else v-model="residentInfo.id"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>姓名</span>
                  <span v-if="!isEditing">{{ residentInfo.name }}</span>
                  <el-input v-else v-model="residentInfo.name"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item" style="display: flex; align-items: center;">
                  <span>头像</span>
                  <image-preview  v-if="!isEditing" :src="residentInfo.avator" :width="100" :height="100"/>
                  <image-upload v-else v-model="residentInfo.avator" />
                  <!-- <el-avatar v-if="!isEditing" :size="small" :icon="residentInfo.avator ? '' : 'user'"
                    :src="residentInfo.avator"></el-avatar> -->
                  <!-- 这里可以添加上传头像的组件，暂用输入框模拟 -->

                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>身份证号</span>
                  <span v-if="!isEditing">{{ residentInfo.idcard }}</span>
                  <el-input v-else v-model="residentInfo.idcard"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>手机号码</span>
                  <span v-if="!isEditing">{{ residentInfo.tel }}</span>
                  <el-input v-else v-model="residentInfo.tel"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>现居地</span>
                  <span v-if="!isEditing">{{ residentInfo.address }}</span>
                  <el-input v-else v-model="residentInfo.address"></el-input>
                </div>
              </el-col>
              <!-- <el-col :span="6">
                <div class="info-item">
                  <span>登录密码</span>
                
                  <span v-if="!isEditing">{{ password }}</span>
                  <el-input v-else v-model="password"></el-input>
                </div>
              </el-col> -->
              <el-col :span="6">
                <div class="info-item">
                  <span>行政区划</span>
                  <span v-if="!isEditing">{{ residentInfo.region }}</span>
                  <el-input v-else v-model="residentInfo.region"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>居民标签</span>
                  <span v-if="!isEditing" v-for="item in residentInfo.tags">
                    <el-tag type="success">{{ item }}</el-tag>
                  </span>
                  <!-- <span v-if="!isEditing" v-for="(tag, index) in residentInfo.tags" :key="index">{{ tag }} </span>
                                  <el-input v-else v-model="residentInfo.tags" @change="handleTagChange"></el-input> -->
                  <el-select v-else v-model="selectuserlabel" multiple placeholder="请选择" @change="handleTagChange">
                    <el-option v-for="item in userlable" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>性别</span>
                  <span v-if="!isEditing">{{ residentInfo.sex == 1 ? '男' : '女' }}</span>
                  <!-- <el-input v-else v-model="residentInfo.gender"></el-input> -->
                  <el-select v-else v-model="residentInfo.sex" placeholder="请选择性别">
                    <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label"
                      :value="parseInt(dict.value)"></el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>出生日期</span>
                  <span v-if="!isEditing">{{ residentInfo.birthday }}</span>
                  <el-date-picker v-else v-model="residentInfo.birthday" type="date"></el-date-picker>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>籍贯</span>
                  <span v-if="!isEditing">{{ residentInfo.place }}</span>
                  <el-input v-else v-model="residentInfo.place"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>民族</span>
                  <span v-if="!isEditing">{{ residentInfo.ethnic }}</span>
                  <el-input v-else v-model="residentInfo.ethnic"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>文化程度</span>
                  <span v-if="!isEditing">{{ residentInfo.culture }}</span>
                  <!-- <el-input v-else v-model="residentInfo.culture"></el-input> -->
                  <el-select v-else v-model="residentInfo.culture" placeholder="请选择文化程度">
                    <el-option v-for="dict in culture" :key="dict.value" :label="dict.label"
                      :value="parseInt(dict.value)"></el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>婚姻状况</span>
                  <span v-if="!isEditing">{{ residentInfo.marry }}</span>
                  <!-- <el-input v-else v-model="residentInfo.maritalStatus"></el-input> -->
                  <el-select v-else v-model="residentInfo.marry" placeholder="请选择婚姻状况">
                    <el-option v-for="dict in marry" :key="dict.value" :label="dict.label"
                      :value="parseInt(dict.value)"></el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>职业</span>
                  <span v-if="!isEditing">{{ residentInfo.occupation }}</span>
                  <el-input v-else v-model="residentInfo.occupation"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>工作单位</span>
                  <span v-if="!isEditing">{{ residentInfo.workplace }}</span>
                  <el-input v-else v-model="residentInfo.workplace"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>紧急联系人</span>
                  <span v-if="!isEditing">{{ residentInfo.urgent }}</span>
                  <el-input v-else v-model="residentInfo.urgent"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>联系人电话</span>
                  <span v-if="!isEditing">{{ residentInfo.urgenttel }}</span>
                  <el-input v-else v-model="residentInfo.urgenttel"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>户籍类型</span>
                  <span v-if="!isEditing">{{ residentInfo.household }}</span>
                  <!-- <el-input v-else v-model="residentInfo.household"></el-input> -->
                  <el-select v-else v-model="residentInfo.household" placeholder="请选择">
                    <el-option v-for="dict in household" :key="dict.value" :label="dict.label"
                      :value="parseInt(dict.value)"></el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>费用类型</span>
                  <span v-if="!isEditing">{{ residentInfo.expense }}</span>
                  <!-- <el-input v-else v-model="residentInfo.paymentType"></el-input> -->
                  <el-select v-else v-model="residentInfo.expense" placeholder="请选择费用类型">
                    <el-option v-for="dict in expense" :key="dict.value" :label="dict.label"
                      :value="parseInt(dict.value)"></el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>定点医疗单位</span>
                  <span v-if="!isEditing">{{ residentInfo.medicalunits }}</span>
                  <el-input v-else v-model="residentInfo.medicalunits"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>来源</span>
                  <span v-if="!isEditing">{{ residentInfo.source }}</span>
                  <!-- <el-input v-else v-model="residentInfo.source"></el-input> -->
                  <el-select v-else v-model="residentInfo.source" placeholder="请选择来源">
                    <el-option v-for="dict in source" :key="dict.value" :label="dict.label"
                      :value="parseInt(dict.value)"></el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- 健康信息 -->
          <div class="section">
            <h2>健康信息</h2>
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="info-item">
                  <span>身高</span>
                  <span v-if="!isEditing">{{ residentInfo.height }}cm</span>
                  <el-input v-else v-model="residentInfo.height"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>体重</span>
                  <span v-if="!isEditing">{{ residentInfo.weight }}kg</span>
                  <el-input v-else v-model="residentInfo.weight"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>血型</span>
                  <span v-if="!isEditing">{{ residentInfo.blood }}</span>
                  <el-input v-else v-model="residentInfo.blood"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>RH阴性</span>
                  <span v-if="!isEditing">{{ residentInfo.rh == 1 ? '是' : '否' }}</span>
                  <!-- <el-switch v-else v-model="residentInfo.rh"></el-switch> -->
                  <el-select v-else v-model="residentInfo.rh" placeholder="请选择" clearable>
                    <el-option v-for="item in RHoptions" :key="item.value" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>过敏史</span>
                  <span v-if="!isEditing">{{ residentInfo.allergies }}</span>
                  <el-input v-else v-model="residentInfo.allergies"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>既往史</span>
                  <span v-if="!isEditing">{{ residentInfo.past }}</span>
                  <el-input v-else v-model="residentInfo.past"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>就诊史</span>
                  <span v-if="!isEditing">{{ residentInfo.consultation }}</span>
                  <el-input v-else v-model="residentInfo.consultation"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="info-item">
                  <span>家族病史</span>
                  <span v-if="!isEditing">{{ residentInfo.famliypast }}</span>
                  <el-input v-else v-model="residentInfo.famliypast"></el-input>
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- 家庭成员
          <div class="section">
            <h2>家庭成员</h2>
            <el-row :gutter="20">
              <el-col :span="12" v-for="(familyMember, index) in familyMembers" :key="index">
                <div class="family-item">
                  <el-avatar v-if="!isEditing" :size="small" :icon="familyMember.avatar ? '' : 'user'"
                    :src="familyMember.avatar"></el-avatar>
                  <el-input v-else v-model="familyMember.avatar"></el-input>
                  <span v-if="!isEditing">{{ familyMember.name }} {{ familyMember.age }}岁</span>
                  <div v-else>
                    <el-input v-model="familyMember.name" style="width: 80px;"></el-input>
                    <el-input v-model="familyMember.age" style="width: 50px;"></el-input>
                  </div>
                  <span v-if="!isEditing">关系：{{ familyMember.relationship }}</span>
                  <el-input v-else v-model="familyMember.relationship"></el-input>
                </div>
              </el-col>
            </el-row>
          </div> -->
        </el-tab-pane>
        <el-tab-pane name="health-record">
          <template #label>
            <span style="font-size: 20px;">健康记录</span>
          </template>
         <healthlog :userId="residentInfo.id"/>
        </el-tab-pane>
        <el-tab-pane name="contract-info">
          <template #label>
            <span style="font-size: 20px;">签约信息</span>
          </template>
        <qianyuelog :userId="residentInfo.id"/>
        </el-tab-pane>
        <el-tab-pane name="service-record">
          <template #label>
            <span style="font-size: 20px;">服务记录</span>
          </template>
      <serverlog :userId="residentInfo.id" :username="residentInfo.name"/>
        </el-tab-pane>
      </el-tabs>
      <!-- 底部按钮 -->
      <el-row class="footer">
        <el-col :span="6">
          <el-button v-if="activeName == 'health-archive'" type="primary" @click="toggleEdit">{{ isEditing ? '保存档案信息' : '编辑档案信息' }}</el-button>
        </el-col>
        <el-col :span="6">
          <el-button v-if="isEditing"  @click="goBack">返回</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>

import { useRoute } from 'vue-router'
import { getInfodetail, addtags, deletetags,settag, getlablelist, listResidentfirst, listResident, getResident, delResident, addResident, updateResident } from "@/api/resident/resident";
import { resetUserPwd, getUser, updateUser, addUser } from "@/api/system/user";
import { ref } from 'vue';
import healthlog from '@/views/healthlog/healthlog/index.vue'
import qianyuelog from '@/views/resident/qianyuelog.vue'
import serverlog from './resident/serverlog.vue';



const { proxy } = getCurrentInstance();
const { marry, expense, sys_user_sex, culture, source, household } = proxy.useDict('household', 'marry', 'expense', 'sys_user_sex', 'culture', 'source');
// 获取当前路由实例
const route = useRoute()

// 从路由参数中获取居民信息
const residentInfo = ref(route.query)
console.log('residentInfo', residentInfo)
//密码
const password = ref('')
//得到密码
function getPassword() {
  getUser(residentInfo.value.sysUserId).then((res) => {
    password.value = res.data.password
    console.log("密码", password.value);

  })
}
// 用户标签
let selectuserlabel = ref([])

let userlable = ref([])
//得到标签
function getlable() {
  getlablelist().then(response => {
    console.log(response.data);
    response.data.forEach(item => {
      userlable.value.push({ value: item.id, label: item.tagName })
      residentInfo.value.tags.forEach(it=>{
  if(it==item.tagName){
    selectuserlabel.value.push(item.id)
  }
})
    })
  })

}
//RH
const RHoptions = [
  { value: "1", label: "否" },
  { value: "0", label: "是" },
  { value: "2", label: "未知" },
]

const activeName = ref('health-archive')
const isEditing = ref(false)
let addtageslist=ref([])
// 处理标签输入的变化
const handleTagChange = (value) => {
 console.log("value",value);
addtageslist.value=value

console.log("addtageslist",addtageslist.value);
 
 
}
function getinfo(){
  getInfodetail(residentInfo.value.id).then(res=>{
    console.log('getinfo',res);
    residentInfo.value=res.data
  }).catch(error=>{
    console.log('error',error);
  })
}
// 模拟发消息方法
const sendMessage = () => {
  console.log('发送消息功能待实现，此处模拟触发')
}

// 切换编辑状态
const toggleEdit = () => {
  if (isEditing.value) {
    
    deletetags(residentInfo.value.id).then(res=>{
      console.log('res',res);

    }).catch(error=>{
    console.log('error',error);
    })
    let data={userid:residentInfo.value.id,list:addtageslist.value}
    console.log('data',data);
addtags(data).then(res=>{
  console.log('res',res);
  
}).catch(error=>{
  console.log('error',error);
})
updateResident(residentInfo.value).then(response => {
              proxy.$modal.msgSuccess("home修改成功");
            
              getinfo()
              getlable()
            }).catch(error=>{
console.log('error',error);
            })



    // 保存信息的逻辑可以在这里添加
    console.log('保存档案信息功能待实现，此处模拟触发')
    // 可以添加发送请求保存数据的代码
    // 例如：axios.post('/api/saveResidentInfo', { residentInfo: residentInfo.value, residentInfo: residentInfo.value, familyMembers: familyMembers.value })
  }
  isEditing.value = !isEditing.value
}

// 模拟返回方法
const goBack = () => {
  console.log('返回功能待实现，此处模拟触发')
  isEditing.value = !isEditing.value
}

getinfo()
getPassword()
getlable()
</script>

<style scoped>
.cardbg {
  width: 100%;
  height: 100%;
  background-color: #f2f7fb;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  /* 圆角 */
  border-radius: 10px;
  width: 80%;
  height: 100%;
  background-color: white;
  padding: 20px;
}

.container {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.section {
  margin-top: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 20px;
}

.info-item {
  margin-bottom: 10px;
}

.info-item span:first-child {
  /* 可以添加一些样式，比如设置宽度 */
  width: 80px;
  font-size: 15px;
  opacity: 0.6;
  margin-right: 20px;
}
::deep(el-upload-list__item is-success){
width: 100px;
height: 100px;
}
.family-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.footer {
  margin-top: 20px;
}
</style>